<ti-drop
  [dominatorElem]="dominatorElem"
  [panelWidth]="panelWidth"
  [class.ti3-select-small]="size === 'small'"
  [panelAlign]="panelAlign"
  [referElem]="referElem"
  [dominatorSpace]="dominatorSpace"
>
  <ng-content select="[custom]"></ng-content>
  <div *ngIf="searchable">
    <ti-searchbox-notsearch
      #searchboxCom
      noBorder
      class="ti3-dropdown-searchbox"
      [(ngModel)]="searchWord"
      (ngModelChange)="searchWordChange($event)"
      [id]="appendId('searchbox')"
    >
    </ti-searchbox-notsearch>
  </div>
  <!-- 如果不加 ngIf 控制其在打开面板的时候再显示，那么在 select 初始化时下拉 list 就会解析，性能不好-->
  <ti-list
    *ngIf="listInited"
    [multiple]="multiple"
    [options]="((type !== 'suggestion' && searchable) || type === 'suggestion')?searchResult:options"
    [(ngModel)]="model"
    [selectAll]="selectAll"
    style="display: block"
    (select)="onSelect($event)"
    [id]="appendId('list')"
    [tipPosition]="tipPosition"
    [tipMaxWidth]="tipMaxWidth"
    [noDataText]="noDataText"
    [virtual]="virtual"
    [itemSize]="itemSize"
    [labelKey]="labelKey"
    [idKey]="idKey"
    (scrollToBottom)="onScrollToBottom($event)"
  >
    <ng-template let-item let-i="index" let-last="last">
      <ng-container *ngIf="itemTemplate else listLabelTemplate">
        <ng-container *ngTemplateOutlet="itemTemplate; context: {$implicit: item,index: i,last: last}"> </ng-container>
      </ng-container>
      <ng-template #listLabelTemplate>{{item[labelKey]}}</ng-template>
    </ng-template>
  </ti-list>
  <ng-container *ngIf="footerTemplateRef">
    <section #footer>
      <ng-container *ngTemplateOutlet="footerTemplateRef"></ng-container>
    </section>
  </ng-container>
</ti-drop>
